<template>
  <div>
    <el-steps :space="200" :active="active" finish-status="success" simple  style="margin-bottom: 20px">
        <el-step :key = "index" :title="tabPage.title"  v-for="(tabPage,index) in tabs">
        </el-step>
    </el-steps>
      <div :key = "index" v-for="(tabPage,index) in tabs " v-show="index===active">
          <NvEntry  @define-event="handleDefineEvent($event)" :config="tabPage.config" :ref="'component_'+(index)"  v-if= "tabPage.moduleCode ==  ConstDef.MODULE_CODE_ENTRY"/>
          <nv-filter
                  @define-event="handleDefineEvent($event)"
                  :filterConfig="tabPage.config"
                  :ref="'component_'+(index)"
                  v-else-if=" tabPage.moduleCode == ConstDef.MODULE_CODE_FILTER"
          />
      </div>
    <div>
      <el-button @click="pre"  type="primary" :disabled="active<1">
        <span >上一步</span>
      </el-button>
      <el-button @click="next" type="primary" :disabled="active>=tabs.length-1">
        <span >下一步</span>
      </el-button>
    </div>
  </div>
</template>
<script>

import ConstDef from '../../js/ConstDef'
import NvEntry from '../../views/basic/NvEntry'
import NvFilter from '../../views/basic/NvFilter'
import { ref, getCurrentInstance } from 'vue'
import frontRuleExecutor from '../../js/frule/FrontRuleExecutor'

export default {
  name: "InstSteps",
  props: {
    config: {
      type: Object,
      default: null
    }
  },
  components: {
    NvEntry, NvFilter
  },
  setup(props) {
    const currentInstance = getCurrentInstance();
    const active = ref(0);
    const tabs = ref([]);
    async function next() {
      if (active.value >= tabs.value.length) { return; }
      //      const currentEntry = getCurrentInstance.refs["component_" + this.active][0];
      const result = await beforeMoveNext();
      if (!result) return;
      active.value++;
      await afterMoveNext();
    }
    async function pre() {
      if (active.value >= 1) { active.value--; }
    }
    async function beforeMoveNext() {
      const currentNvsData = currentInstance.refs["component_" + active.value][0].nvsData;
      const nextNvsData = currentInstance.refs["component_" + (active.value + 1)][0].nvsData;
      if (currentNvsData) {
        const variable = {
          currentNvsData,
          nextNvsData
        }
        const result = await frontRuleExecutor.executeLayoutRules(currentInstance, currentNvsData, variable, ConstDef.FRONT_RULE_BEFORE_MOVE_NEXT);
        return result;
      } else {
        return false;
      }
    }
    async function afterMoveNext() {
    }
    return {
      active,
      tabs,
      ConstDef,
      next,
      afterMoveNext,
      beforeMoveNext,
      pre
    };
  },
  methods: {
    async handleDefineEvent(event) {
      this.$emit("define-event", event);
    }
  },
  async created() {
    this.tabs = this.config.tabPages;
  }

};
</script>
<style lang="scss">
</style>
